<template>
  <el-dialog
    :title="add ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      v-if="add"
      class="type-form"
      :model="typeForm"
      :rules="typeRule"
      ref="typeForm"
      label-width="120px"
    >
      <el-form-item label="是否新增类型" prop="isAdd">
        <el-select v-model="typeForm.isAdd" placeholder="请选择">
          <el-option label="否" value="0"> </el-option>
          <el-option label="是" value="1"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="typeForm.isAdd == 0" label="类型选择" prop="code">
        <el-select v-model="typeForm.code" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.id"
            :label="item.issueDesc"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-else label="类型名称" prop="issueDesc">
        <el-input
          v-model="typeForm.issueDesc"
          placeholder="请输入类型名称"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="120px"
    >
      <el-form-item label="问题" prop="issueDesc">
        <el-input
          v-model="dataForm.issueDesc"
          placeholder="请输入问题"
        ></el-input>
      </el-form-item>
      <el-form-item label="知识答案" prop="solution">
        <el-input
          class="solution"
          type="textarea"
          v-model="dataForm.solution"
          placeholder="请输入知识答案"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="add" type="primary" @click="dataFormSubmit()"
        >确定</el-button
      >
      <el-button v-else type="primary" @click="updateData()">更新</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addLabel, update, queryTreeList } from "@/api/knowlegeBase";
import { mapState } from "vuex";
export default {
  data() {
    return {
      visible: false,
      add: true,
      category: [],
      typeForm: {
        code: "",
        pcode: "",
        issueDesc: "",
        waiterId: "",
        isAdd: "0",
      },
      dataForm: {
        code: "",
        pcode: "",
        issueDesc: "",
        solution: "",
        waiterId: "",
      },
      typeRule: {
        code: [
          {
            required: true,
            message: "类型不能为空",
            trigger: "change",
          },
        ],
        issueDesc: [
          {
            required: true,
            message: "类型不能为空",
            trigger: "blur",
          },
        ],
      },
      dataRule: {
        issueDesc: [
          {
            required: true,
            message: "问题不能为空",
            trigger: "blur",
          },
        ],
        solution: [
          {
            required: true,
            message: "知识答案不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["idStore"]),
  },
  mounted() {
    this.getCategory();
  },
  methods: {
    async init(type, data) {
      if (type == 1) {
        this.add = false;
      } else {
        this.add = true;
        await this.getCategory();
      }
      this.visible = true;
      this.$nextTick(() => {
        if (this.add) {
          this.$refs["typeForm"].resetFields();
          this.$refs["dataForm"].resetFields();
        } else {
          this.$refs["dataForm"].resetFields();
        }
        if (data) {
          const { id, code, pcode, solution, issueDesc } = data;
          this.dataForm.id = id;
          this.dataForm.code = code;
          this.dataForm.pcode = pcode;
          this.dataForm.solution = solution;
          this.dataForm.issueDesc = issueDesc;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.typeForm.waiterId = this.idStore.waiterId;
      this.dataForm.waiterId = this.idStore.waiterId;
      let typeValid = false
      this.$refs["typeForm"].validate((_typeValid)=>{
            typeValid = _typeValid
            console.log('typeValid',typeValid)
      })
      this.$refs["dataForm"].validate(async (valid) => {
        if (valid && typeValid) {
          if (this.typeForm.isAdd == 1) {
            await this.addData(0);
          }
          this.dataForm.pcode = this.typeForm.code;
          await this.addData(1);
        }
      });
    },
    async addData(type) {
      let params = {};
      if (type == 0) {
        //提交分类数据表
        params = this.typeForm;
      } else {
        params = this.dataForm;
      }
      await addLabel(params)
        .then((res) => {
          if (type == 0) {
            const { data } = res;
            this.typeForm.code = data.code;
          }
          this.$emit("refreshDataList");
          this.visible = false;
        })
        .catch(() => {
          this.$message.error(`增加知识库异常`);
        });
    },
    async getCategory() {
      const params = {
        pageSize: 1000,
        pageNum: 1,
      };
     await  queryTreeList(params)
        .then((res) => {
          const { data } = res;
          this.category = data;
        })
        .catch(() => {
          this.$message.error(`获取知识库异常`);
        });
    },
    updateData() {
      this.dataForm.waiterId = this.idStore.waiterId;
      update(this.dataForm)
        .then(() => {
          this.$message.success(`修改成功`);
          this.$emit("refreshDataList");
          this.visible = false;
        })
        .catch(() => {
          this.$message.error(`修改知识库异常`);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.solution {
  ::v-deep textarea {
    max-height: 80px;
  }
}
.type-form {
  ::v-deep .el-select {
    width: 100%;
  }
}
</style>